<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: black;
      }
      .left-menu {
        width: 57px;
        /* height: 775px; */
        background: linear-gradient(
          0deg,
          rgba(219, 44, 37, 1) 0%,
          rgba(240, 57, 50, 1) 46%,
          rgba(219, 44, 37, 1) 98%
        );
        border-radius: 0px 6px 6px 0px;
        box-shadow: 0 6px 9px 0 #888888;
        padding: 36px 8px 25px;
      }
      .left-menu-item {
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        padding-bottom: 22px;
        border-bottom: 1px solid #da221a;
        margin-bottom: 14px;
        position: relative;
        cursor: pointer;
        transition: 0.2s ease-in-out;
      }
      .left-menu-item:hover {
        color: #ffe839;
      }
      .left-menu-item-text {
        margin-top: 5px;
      }
      .left-menu-item-img {
        height: 24px;
        width: 24px;
        margin: auto;
        transition: 0.2s ease-in-out;
      }
      .left-menu-children {
        width: 322px;
        padding: 24px;
        background: rgba(255, 255, 255, 1);
        border-radius: 0px 6px 6px 0px;
        position: absolute;
        top: -15px;
        left: 65px;
        display: none;
        text-align: left;
      }
      .left-menu-children-title {
        width: 75px;
        font-size: 16px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        position: absolute;
        top: 19px;
        background: #fff;
      }
      .left-menu-children-top {
        height: 6px;
        border-bottom: 1px solid #ececec;
      }
      .left-menu-children-container {
        padding: 40px 18px 0;
      }
      .left-menu-children-item {
        text-align: center;
        width: 77px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        display: inline-block;
        margin-right: 27px;
        margin-bottom: 20px;
        text-align: center;
        position: relative;
      }
      .left-menu-children-item-tag {
        position: absolute;
        right: -5px;
        top: 0px;
      }
    </style>
  </head>
  <body>
    <div class="left-menu" id="left-menu"></div>
  </body>
  <script src="./js/jquery-1.11.0.min.js"></script>
  <script type="text/javascript">
    $(function() {
      var type = [
        {id: 1, name: '工程类', src: './image/icon/left_menu_gc.png', children: [
          {id:1, name:'建筑工程',src:'./image/icon/left_menu_children_jzgc.png',isHot:true,isNew:false},
          {id:2, name:'消防工程',src:'./image/icon/left_menu_children_xfgc.png',isHot:true,isNew:false},
          {id:3, name:'水电工程',src:'./image/icon/left_menu_children_sdgc.png',isHot:false,isNew:false},
          {id:4, name:'电力建设',src:'./image/icon/left_menu_children_dljs.png',isHot:false,isNew:false},
          {id:5, name:'门窗工程',src:'./image/icon/left_menu_children_mcgc.png',isHot:false,isNew:true},
          {id:6, name:'生物工程',src:'./image/icon/left_menu_children_swgc.png',isHot:false,isNew:false},
          {id:7, name:'工程检测',src:'./image/icon/left_menu_children_jzgc.png',isHot:false,isNew:false},
          {id:8, name:'工程咨询',src:'./image/icon/left_menu_children_gczx.png',isHot:false,isNew:false},
          {id:9, name:'工程管理',src:'./image/icon/left_menu_children_gcgl.png',isHot:false,isNew:false},
        ]},
        {id: 2, name: '建设类', src: './image/icon/left_menu_js.png',children: [
          {id:1, name:'电力建设',src:'./image/icon/left_menu_children_dljs2.png',isHot:true,isNew:false},
          {id:2, name:'电力设计',src:'./image/icon/left_menu_children_dlsj.png',isHot:true,isNew:false},
        ]},
        {id: 3, name: '检测类', src: './image/icon/left_menu_jc.png',children: [
          {id:1, name:'环保检测',src:'./image/icon/left_menu_children_hbjc.png',isHot:true,isNew:false},
          {id:2, name:'医学检测',src:'./image/icon/left_menu_children_yxjc.png',isHot:true,isNew:false},
          {id:3, name:'环境检测',src:'./image/icon/left_menu_children_sdgc.png',isHot:false,isNew:false},
          {id:4, name:'检测技术',src:'./image/icon/left_menu_children_jcjs.png',isHot:false,isNew:false},
        ]},
        {id: 4, name: '机械设备', src: './image/icon/left_menu_jxsb.png',children: [
          {id:1, name:'环保设备',src:'./image/icon/left_menu_children_hbsb.png',isHot:true,isNew:false},
          {id:2, name:'电气设备',src:'./image/icon/left_menu_children_dljs.png',isHot:true,isNew:false},
          {id:3, name:'检测设备',src:'./image/icon/left_menu_children_jcsb.png',isHot:false,isNew:false},
          {id:4, name:'照明设备',src:'./image/icon/left_menu_children_zmsb.png',isHot:false,isNew:false},
          {id:5, name:'医疗器械',src:'./image/icon/left_menu_children_ylqx.png',isHot:false,isNew:false},
        ]},
        {id: 5, name: '建筑材料', src: './image/icon/left_menu_jzcl.png',children: [
          {id:1, name:'紧固件',src:'./image/icon/left_menu_children_jgj.png',isHot:true,isNew:false},
          {id:2, name:'建材类',src:'./image/icon/left_menu_children_jcl.png',isHot:true,isNew:false},
          {id:3, name:'防火/水材料',src:'./image/icon/left_menu_children_fshcl.png',isHot:false,isNew:false},
          {id:4, name:'混凝土',src:'./image/icon/left_menu_children_hnt.png',isHot:false,isNew:false},
          {id:5, name:'橡胶公司',src:'./image/icon/left_menu_children_mcgc.png',isHot:false,isNew:false},
          {id:6, name:'保温材料',src:'./image/icon/left_menu_children_swgc.png',isHot:false,isNew:false},
          {id:7, name:'电子线材',src:'./image/icon/left_menu_children_jzgc.png',isHot:false,isNew:false},
          {id:8, name:'玻璃',src:'./image/icon/left_menu_children_gczx.png',isHot:false,isNew:false},
          {id:9, name:'合金材料',src:'./image/icon/left_menu_children_hjcl.png',isHot:false,isNew:false},
          {id:10, name:'管业',src:'./image/icon/left_menu_children_gy.png',isHot:false,isNew:false},
          {id:11, name:'水泥',src:'./image/icon/left_menu_children_sn.png',isHot:false,isNew:false},
          {id:12, name:'塑胶',src:'./image/icon/left_menu_children_sj.png',isHot:false,isNew:false},
          {id:13, name:'肥料',src:'./image/icon/left_menu_children_fl.png',isHot:false,isNew:false},
          {id:14, name:'纤维',src:'./image/icon/left_menu_children_xw.png',isHot:false,isNew:false},
        ]},
        {id: 6, name: '能源资源', src: './image/icon/left_menu_nyzy.png',children: [
          {id:1, name:'新能源',src:'./image/icon/left_menu_children_xny.png',isHot:true,isNew:false},
          {id:2, name:'再生资源',src:'./image/icon/left_menu_children_zszy.png',isHot:false,isNew:false},
        ]},
        {id: 7, name: '生活服务', src: './image/icon/left_menu_shfw.png',children: [
          {id:1, name:'暖通',src:'./image/icon/left_menu_children_nt.png',isHot:true,isNew:false},
          {id:2, name:'物业',src:'./image/icon/left_menu_children_xfgc.png',isHot:true,isNew:false},
          {id:3, name:'印刷',src:'./image/icon/left_menu_children_ys.png',isHot:false,isNew:false},
          {id:4, name:'旅游',src:'./image/icon/left_menu_children_ly.png',isHot:false,isNew:false},
          {id:5, name:'绿化',src:'./image/icon/left_menu_children_lh.png',isHot:false,isNew:false},
          {id:6, name:'仓储物流',src:'./image/icon/left_menu_children_ccwl.png',isHot:false,isNew:false},
        ]},
        {id: 8, name: '食品类', src: './image/icon/left_menu_sp.png',children: [
          {id:1, name:'米业',src:'./image/icon/left_menu_children_my.png',isHot:true,isNew:false},
          {id:2, name:'酒业',src:'./image/icon/left_menu_children_jy.png',isHot:true,isNew:false},
          {id:3, name:'茶业',src:'./image/icon/left_menu_children_lh.png',isHot:false,isNew:false},
          {id:4, name:'粮油',src:'./image/icon/left_menu_children_liangyou.png',isHot:false,isNew:false},
          {id:5, name:'饮品',src:'./image/icon/left_menu_children_yp.png',isHot:false,isNew:false},
        ]},
        {id: 9, name: '果蔬农牧', src: './image/icon/left_menu_gsnm.png',children: [
          {id:1, name:'牧业',src:'./image/icon/left_menu_children_muye.png',isHot:true,isNew:false},
          {id:2, name:'农业',src:'./image/icon/left_menu_children_ny.png',isHot:true,isNew:false},
          {id:3, name:'蔬菜',src:'./image/icon/left_menu_children_sc.png',isHot:false,isNew:false},
          {id:4, name:'果业',src:'./image/icon/left_menu_children_guoye.png',isHot:false,isNew:false},
          {id:5, name:'水产',src:'./image/icon/left_menu_children_shuichan.png',isHot:false,isNew:true},
          {id:6, name:'饲料',src:'./image/icon/left_menu_children_sl.png',isHot:false,isNew:false},
        ]}
      ]
      initLeftMenuItem(type, $('#left-menu'))
    })
    function initLeftMenuItem(data, parent) {
      var el = ''
      for (key in data) {
        var currentData = data[key]
        var items = initLeftMenuChildrenItem(currentData.children,3)
        var temp = [
          '<div class="left-menu-item" id="type-' + currentData.id + '">',
          '  <div class = "left-menu-item-img" style="background: url(' +
            currentData.src +
            ')" ></div>',
          '  <div class="left-menu-item-text">' + currentData.name + '</div>',
          // ' <div class="left-menu-children"></div>',
          ' <div class="left-menu-children">',
          '   <div class="left-menu-children-top"></div>',
          '   <div class="left-menu-children-title">'+currentData.name+'</div>',
          '   <div class="left-menu-children-container" id="left-menu-children-container">',
            items,
          '   </div>',
        '    </div>',
          '</div>'
        ].join('')
        el += temp
      }
      parent.append(el)
      $('.left-menu-item').hover(
        function() {
          var images = {
            'type-1': './image/icon/left_menu_gc_active.png',
            'type-2': './image/icon/left_menu_js_active.png',
            'type-3': './image/icon/left_menu_jc_active.png',
            'type-4': './image/icon/left_menu_jxsb_active.png',
            'type-5': './image/icon/left_menu_jzcl_active.png',
            'type-6': './image/icon/left_menu_nyzy_active.png',
            'type-7': './image/icon/left_menu_shfw_active.png',
            'type-8': './image/icon/left_menu_sp_active.png',
            'type-9': './image/icon/left_menu_gsnm_active.png'
          }
          var id = $(this).attr('id')
          $('.left-menu-children').hide()
          $(this)
            .find('.left-menu-item-img')
            .css('backgroundImage', 'url("' + images[id] + '")')
          $(this).find('.left-menu-children').show()
        },
        function() {
          var images = {
            'type-1': './image/icon/left_menu_gc.png',
            'type-2': './image/icon/left_menu_js.png',
            'type-3': './image/icon/left_menu_jc.png',
            'type-4': './image/icon/left_menu_jxsb.png',
            'type-5': './image/icon/left_menu_jzcl.png',
            'type-6': './image/icon/left_menu_nyzy.png',
            'type-7': './image/icon/left_menu_shfw.png',
            'type-8': './image/icon/left_menu_sp.png',
            'type-9': './image/icon/left_menu_gsnm.png'
          }
          var id = $(this).attr('id')
          $(this)
            .find('.left-menu-item-img')
            .css('backgroundImage', 'url("' + images[id] + '")')
          // $(this).find('.left-menu-children').hide()
        }
      )
      $('.left-menu-children').hover(function(){

      },function(){
        $(this).hide()
      })
    }
    function initLeftMenuChildrenItem(data,num) {
      var el = ''
      for(key in data) {
        var currentData = data[key]
        var flag = (+key+1) % num
        var temp = [
          '<div class="left-menu-children-item" '+(flag ? '':'style="margin-right:0;"')+'>',
          (currentData.isHot ?  '  <img class="left-menu-children-item-tag" src="./image/icon/left_menu_hot.png" />' : ''),
          (currentData.isNew ?  '  <img class="left-menu-children-item-tag" src="./image/icon/left_menu_new.png" />' : ''),
          '  <img src="'+currentData.src+'" />',
          '  <div>'+currentData.name+'</div>',
          '</div>'].join("");
        el += temp
      }
      return el
    }
  </script>
</html>
